<template>
  <div class="tb">
    <table flex="1">
      <thead>
        <th v-for="item in list" :key="item">
          <input-title :title="item" :required="true"></input-title>
        </th>
      </thead>
      <tbody>
        <template v-if="form.length > 0">
          <tr v-for="(item, index) in form" :key="item">
            <td :data-ind="ind(index + 1)">
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.name"
                maxlength="7"
                :placeholder="$t('application.form.enter')"
                :disabled="disabled"
              />
            </td>
            <td>
              <select-input
                @message="
                  (e) => {
                    item.role = e.value;
                  }
                "
                :typeList="roleList"
                :placeholder="$t('application.form.choose')"
                width="2.4rem"
                :disabled="disabled"
                :history="item.role"
              ></select-input>
            </td>
            <td>
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.college"
                maxlength="15"
                :placeholder="$t('application.form.enter')"
                :disabled="disabled"
              />
            </td>
            <td>
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.specialty"
                maxlength="10"
                :placeholder="$t('application.form.enter')"
                :disabled="disabled"
              />
            </td>
            <td>
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.grade"
                :placeholder="$t('application.form.enter')"
                :disabled="disabled"
              />
            </td>
            <td>
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.phone"
                :placeholder="$t('application.form.enter')"
                :disabled="disabled"
              />
            </td>
            <td>
              <input
                :data-font="$i18n.locale"
                class="tb-ipt"
                v-model="item.photo"
                :disabled="disabled"
              />
              <div class="btns">
                <file-load accept=".pdf"
                  :history="item.photo"
                  @message="(e) => {item.photo = e}"
                 :size="1" :required="true"></file-load>
                <div
                  class="del"
                  @click.stop="del(index)"
                  v-if="!disabled"
                ></div>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <p class="empty" v-if="form.length <= 0">No data!</p>
    <div class="increase-btn">
      <el-button
        @click="increase"
        :data-font="$i18n.locale"
        :disabled="disabled"
        >{{ $t('application.form.addMembers') }}</el-button
      >
    </div>
  </div>
</template>

<script>
import inputTitle from "./input-title.vue";
import selectInput from "./select-input.vue";
import Confirm from "@/components/message/confirm.js";
import { reactive } from "vue";
import fileLoad from "./file-load.vue";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    history: {
      type: Array,
      default: [
        {
          name: "",
          role: "",
          college: "",
          specialty: "",
          grade: "",
          phone: "",
          photo: "",
        },
        {
          name: "",
          role: "",
          college: "",
          specialty: "",
          grade: "",
          phone: "",
          photo: "",
        },
        {
          name: "",
          role: "",
          college: "",
          specialty: "",
          grade: "",
          phone: "",
          photo: "",
        },
      ],
    },
  },
  components: {
    inputTitle,
    selectInput,
    fileLoad,
  },
  setup() {
    const form = reactive([
      {
        name: "",
        role: "",
        college: "",
        specialty: "",
        grade: "",
        phone: "",
        photo: "",
      },
      {
        name: "",
        role: "",
        college: "",
        specialty: "",
        grade: "",
        phone: "",
        photo: "",
      },
      {
        name: "",
        role: "",
        college: "",
        specialty: "",
        grade: "",
        phone: "",
        photo: "",
      },
    ]);

    return {
      form,
    };
  },
  computed: {
    list() {
      let num = [];
      if (this.$i18n.locale == "zh") {
        num = [
          "成员姓名",
          "成员角色",
          "学院",
          "专业",
          "年级",
          "联系电话",
          "学生证信息页及注册页",
        ];
      } else if (this.$i18n.locale == "en") {
        num = [
          "Member Name",
          "Role",
          "College",
          "Major",
          "Grade",
          "Tel",
          "Student ID Card/Certificate of Enrollment",
        ];
      }
      return num;
    },
    ind() {
      return (index) => {
        let num = "";
        if (index) {
          num = index.toString().padStart(2, "0");
        }
        return num;
      };
    },
    roleList() {
      let num = [];
      if (this.$i18n.locale === "zh") {
        num = [
          {
            name: "队长",
            value: "1",
          },
          {
            name: "队员",
            value: "2",
          },
          {
            name: "指导老师",
            value: "3",
          },
        ];
      } else if (this.$i18n.locale === "en") {
        num = [
          {
            name: "Leader",
            value: "1",
          },
          {
            name: "Member",
            value: "2",
          },
          {
            name: "Advisor",
            value: "3",
          },
        ];
      }

      return num;
    },
  },
  methods: {
    del(index) {
      if (this.$i18n.locale === "zh") {
        Confirm({
          title: "删除项目",
          message: "确定要删除该条队员信息吗？",
          left: "取消",
          right: "删除",
        })
          .then(() => {
            this.form.splice(index, 1);
          })
          .then((ret) => {})
          .catch((err) => {
            // 点击取消按钮触发
            if (err === "cancel") return;
          });
      } else {
        Confirm({
          title: "Delete Item",
          message: "Are you sure you want to delete this member?",
          left: "Cancel",
          right: "Delete",
        })
          .then(() => {
            this.form.splice(index, 1);
          })
          .then((ret) => {})
          .catch((err) => {
            // 点击取消按钮触发
            if (err === "cancel") return;
          });
      }
    },
    increase() {
      let num = {
        name: "",
        role: "",
        college: "",
        specialty: "",
        grade: "",
        phone: "",
        photo: "",
      };
      this.form.push(num);
    },
    photo() {},
  },

  watch: {
    form: {
      deep: true, // 开启深度监听
      handler(newVal, oldVal) {
        this.$emit("message", newVal);
      },
    },
    history: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.form = newVal;
        }
        this.$emit("message", newVal);
      },
    },
  },
};
</script>
<style lang="less" scoped>
.tb {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: none;

  th {
    text-align: left;
  }

  th:nth-of-type(1) {
    width: 4.2rem;
  }

  th:nth-of-type(2) {
    width: 3.92rem;
  }

  th:nth-of-type(3) {
    width: 5.85rem;
  }

  th:nth-of-type(4) {
    width: 5.65rem;
  }

  th:nth-of-type(5) {
    width: 2.77rem;
  }
  th:nth-of-type(6) {
    width: 3.77rem;
  }

  tr {
    td {
      position: relative;
      border: none;
      border-bottom: 0.03rem #c5c5ca solid;
      height: 1.25rem;
    }

    td:nth-of-type(1)::before {
      content: attr(data-ind);
      position: absolute;
      left: -0.47rem;
      bottom: 0.2rem;
      font-size: 0.32rem;
      font-family: "SmileySans-Oblique", "SmileySans";
      font-weight: normal;
      color: #c5c5ca;
      line-height: 0.48rem;
    }

    td:nth-last-child(1) {
      position: relative;

      bottom: -0.32rem;
    }

    .del {
      position: absolute;
      right: -1rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0.64rem;
      height: 0.64rem;
      background: url("@/assets/img/application/delete.png") no-repeat;
      background-size: 50% 50%;
      background-position: 50% 50%;
      pointer-events: auto;
      cursor: url("@/assets/手.png"), auto;
    }
    .btns {
      position: absolute;
      top: 0.1rem;
    }
  }
}

input {
  border: none;
  outline: none;
  background: none;
  pointer-events: auto;
  padding-right: 0.12rem;
}

.tb-ipt {
  width: 100%;
}

.tb-ipt[data-font="zh"] {
  height: 0.85rem;
  font-size: 0.63rem;
  font-weight: 100;
  color: #68656c;
  line-height: 0.85rem;
  font-family: "IdeaFonts-DianHei-DEJ", "IdeaFonts-DianHei";
}

.tb-ipt[data-font="en"] {
  height: 0.75rem;
  font-size: 0.48rem;
  font-family: "Helvetica";
  color: #68656c;
  line-height: 0.75rem;
}

.empty {
  text-align: center;
  color: #999;
  padding: 10px 0;
  font-size: 28px;
}

.tb-ipt[data-font="zh"]::placeholder {
  height: 0.85rem;
  font-size: 0.53rem;
  font-family: "IdeaFonts-DianHei-DEJ", "IdeaFonts-DianHei";
  font-weight: normal;
  color: #c5c5ca;
  line-height: 0.85rem;
}

.tb-ipt[data-font="en"]::placeholder {
  height: 0.75rem;
  font-size: 0.48rem;
  font-family: Helvetica;
  color: #c5c5ca;
  line-height: 0.75rem;
}

.increase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.64rem;

  .el-button {
    width: 9.68rem;
    height: 1.08rem;
    background: linear-gradient(
      315deg,
      rgb(250, 251, 255, 0.25) 0%,
      rgba(252, 248, 255, 0.25) 100%
    );
    border-radius: 0.11rem;
    border: 0.03rem solid #7709cc;
    backdrop-filter: blur(10px);
  }

  .el-button[disabled] {
    cursor: not-allowed !important;
  }

  .el-button :deep(span) {
    font-size: 0.48rem;
    color: #7709cc;
  }

  .el-button[data-font="zh"] :deep(span) {
    font-family: "IdeaFonts-DianHei-CEJ", "IdeaFonts-DianHei";
    font-weight: normal;
  }

  .el-button[data-font="en"] :deep(span) {
    font-family: "PingFangSC-Light", "PingFang SC";
    font-weight: 300;
  }
}
</style>
